<template>
<div id="user">
    <section class="user-header ">
        <div class="user-avatar ">
            <img :src="getUser.avatar" height="60" width="60" class="avatar">
            <span class="gender" v-if="getUser.sex === '男'">♂</span>
            <span class="gender" v-else-if="getUser.sex ==='女'">♀</span>
            <h4>{{getUser.nickname}}</h4>
        </div>
        <div class="right">
            <div class=" kcal">
                <h4>{{getUser.kcal}}</h4>
                <p>总消耗（千卡）</p>
            </div>
            <div class="totaltime">
                <h4>{{getUser.times}}</h4>
                <p>总时间（<span v-if = "getUser.time <= 60">秒</span><span v-else-if = "getUser.time < 3600 && getUser.time > 60">分钟</span> <span v-else>小时</span>）</p>
            </div>
        </div>
    </section>

    <section class="user-card">
        <div class="assets clearfix">
            <!--<router-link class="assets-item clearfix" :to="{name:'money'}">-->
                <div id="money" class=" item-assets" @click="tzmon">
                    <img class="wallet" :src="$qiniu.url+'assets/img/wallet1.png'" alt="wallet">
                    <p>钱包</p>
                    <span>{{ getMoney.money > 10000 ? parseInt(getMoney.money/10000)+'万元' : getMoney.money+ '元' }}</span>
                </div>
                
            <!--</router-link>-->
            <!--<router-link class="assets-item clearfix" :to="{name:'coupon'}">-->
                <div class="item-assets" @click="tzyouhui">
                    <img id="youhui" class="youhui" :src="$qiniu.url+'assets/img/youhui1.png'" alt="coupon" >
                    <p>优惠券</p>
                    <span class="detail-itemassets">{{getUser.couponNum}} 张</span>
                </div>
                
            <!--</router-link>-->
        </div>
        <div class="userinfo clearfix">
            <ul class="clearfix">
                <router-link v-for="item in items" :to="item.url"
                 :key="item.id"
                class="clearfix item-wrapper">
                    <li>
                        <div class="item item-info">
                            <img :src="item.src" :alt="item.alt">
                            <p>{{ item.title }}</p>
                        </div>
                    </li>
                </router-link>
            </ul>
        </div>
    </section>
    <div class="service">
        <a class="item item-service" href="https://www.sobot.com/chat/h5/index.html?sysNum=ac3aab2b8e3541059cac770cd4717fe3&source=1">
            <div class="wrapper">
                <img :src="$qiniu.url+'assets/img/erji.png'" alt="wallet">
            </div>
            <p>联系客服</p>
        </a>
    </div>
    <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import Loading from './loading';
    import {
        refreshTitle
    } from "../tools.js";
    import api from "../api";
    export default {
        components: {
            Loading,
        },
        data() {
            // nowritten
            return {
                items: [{
                        src: this.$qiniu.url + 'assets/img/selfInfo1.png',
                        title: '个人资料',
                        alt: 'profile',
                        url: '/user/edit'
                    }, {
                        src: this.$qiniu.url + 'assets/img/sechIcon1.png',
                        title: '课程表',
                        alt: 'weekly',
                        url: '/today/schedule'
                    }, {
                        src: this.$qiniu.url + 'assets/img/weekIcon1.png',
                        title: '周报',
                        alt: 'allweekly',
                        url: '/user/allweekly'
                    },
                    //  {
                    //     src: this.$qiniu.url + 'assets/img/jianshenIcon.png',
                    //     title: '健身记录',
                    //     alt: 'jianshen',
                    //     url: '/user/jianshen'
                    // }
                ]
            }
        },
        methods: {
            tzmon() {
                document.querySelector("#money").style.backgroundColor = "#262626";
                this.$router.push('/user/money');
            },
            tzyouhui() {
                document.querySelector("#youhui").style.backgroundColor = "#262626";
                this.$router.push('/user/coupon');
            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            // debugger;
            this.$store.dispatch('GET_USER_INFO');
            this.$store.dispatch('GET_MONEY');
            // 当且仅当从当前接口进入的时候清除掉时间的缓存
            // if (window.localStorage.year != null) {
            window.localStorage.removeItem('year');
            window.localStorage.removeItem('month');
            window.localStorage.removeItem('day');
            // }

        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            getUser() {
                return this.$store.state.user
            },
            getMoney() {
                return this.$store.state.money
            }

        }
    }
</script>
<style>
    #user {
        /**user-header**/
        .user-header {
            width: 100%;
            height: 10%;
            padding-top: 2%;
            margin-bottom: 4%;
            display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            -ms-justify-content: center;
            -o-justify-content: center;
            -webkit-box-pack: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            /*background-color: rgb(50, 55, 77);*/
            text-align: center;
            color: #fff;
            h4 {
                font-weight: 300;
                padding-bottom: 0.6rem;
            }
            .user-avatar {
                text-align: center;
                margin-bottom: 1%;
                margin-top: 2%;
                margin-left: 4%;
                font-weight: 100;
                .avatar {
                    border-radius: 50%;
                    margin-top: 0.3rem;
                    border: 0.15rem solid rgba(253, 188, 8, 1);
                }
                .gender {
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: rgba(253, 188, 8, 1);
                    display: inline-block;
                    color: #000;
                    margin-left: -1.6rem;
                    margin-top: -0.5rem;
                    font-size: 0.75rem;
                    text-align: center;
                    vertical-align: middle;
                }
            }
            .right {
                padding-bottom: 2%;
                padding-top: 2%;
                flex-basis: 70%;
                -webkit-flex-basis: 70%;
                -o-flex-basis: 70%;
                ;
                -ms-flex-basis: 70%;
                -moz-flex-basis: 70%;
                /*margin-left: 5%;*/
                p {
                    font-size: 14px;
                    color: #ccc;
                }
                h4 {
                    color: rgba(253, 188, 8, 1);
                    font-weight: 500;
                }
                .kcal {
                    display: inline-block;
                    border-right: 0.1rem solid rgba(253, 188, 8, 0.4);
                    padding: 5% 3% 5% 0;
                }
                .totaltime {
                    display: inline-block;
                    padding: 5% 2% 5% 3%;
                }
            }
        }
        /**card**/
        .user-card {
            border: 1px solid rgba(253, 188, 8, 0.4);
            margin-left: 5px;
            margin-right: 5px;
            p {
                color: #ccc;
            }
            a:hover {
                background-color: #262626;
            }
            /*钱包优惠券*/
            .assets {
                width: 100%;
                height: 100px;
                border-bottom: 1px solid rgba(253, 188, 8, 0.4);
                position: relative;
                .item-assets {
                    width: 50%;
                    height: 100%;
                    float: left;
                    padding-top: 20px;
                    box-sizing: border-box;
                    padding-left: 12%;
                }
                .item-assets:first-child {
                    border-right: 0.1rem solid rgba(253, 188, 8, 0.4);
                }
                .youhui {
                    width: 36px;
                    height: 30px;
                    padding-top: 2px;
                    padding-bottom: 3px;
                    /*padding-left: 15%;*/
                }
                .wallet {
                    width: 30px;
                    height: 35px;
                    /*padding-bottom: 23px;*/
                }
                .item-assets span {
                    color: #fdbc08;
                    position: absolute;
                    top: 60px;
                    left: 30%;
                }
                .item-assets .detail-itemassets {
                    top: 60px;
                    left: 86%;
                }
                /*border-bottom: 0.1rem solid rgba(253, 188, 8, 0.4);
                display: flex;
                display: -webkit-box;
                display: -webkit-flex;
                -ms-justify-content: center;
                -o-justify-content: center;
                -webkit-box-pack: center;
                -moz-justify-content: center;
                -webkit-justify-content: center;
                padding-left: 12%;
                padding-right: 12%;
                padding-top: 20px;
                padding-bottom: 20px;
                box-sizing: border-box;
                .assets-item {
                    flex-basis: 50%;
                    -webkit-flex-basis: 70%;
                    -o-flex-basis: 70%;
                    ;
                    -ms-flex-basis: 70%;
                    -moz-flex-basis: 70%;*/
                /*padding: 0.8rem 0.8rem 0.8rem 45px;*/
                /**/
                /*p{
                  margin-top: -0.2rem;
                }*/
                /*}*/
                /*.assets-item:first-child {
                    border-right: 0.1rem solid rgba(253, 188, 8, 0.4);
                }
                .assets-item:last-child {
                    padding-left: 20%;
                    box-sizing: border-box;
                }*/
            }
            /**info卡片**/
            .userinfo {
                ul a:not(:nth-child(3n)) li {
                    border-right: 0.1rem solid rgba(253, 188, 8, 0.4);
                }
                ul a {
                    /*border-bottom: 0.1rem solid rgb(36, 41, 63);*/
                }
                ul a:last-child li {
                    border: none;
                }
                .item-wrapper {
                    float: left;
                    width: 33%;
                    padding-top: 10%;
                    padding-bottom: 10%;
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                }
            }
        }
        /*所有图片*/
        .item {
            display: inline-block;
            line-height: 0px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            img {
                width: 30px;
                height: 30px;
                margin: 0.2rem;
                padding-bottom: 1rem;
            }
            p {
                font-size: 14px;
                color: #ccc;
                margin-top: 0.2rem;
            }
        }
        .item-wrapper:nth-child(1) img {
            width: 25px;
            height: 30px;
        }
        /*.item-wrapper:nth-child(2) img {
            padding-top: 5px;
            padding-bottom: 18px;
        }
        .item-wrapper:nth-child(3) img {
            padding-top: 5px;
            padding-bottom: 18px;
        }*/
        /*联系客服*/
        .service {
            position: absolute;
            bottom: -23%;
            right: 5%;
            p {
                color: #ccc;
                padding-top: 0.7rem;
            }
            .item-service {
                width: auto;
            }
            .wrapper {
                height: 52px;
                width: 52px;
                border-radius: 50%;
                background-origin: border-box;
                position: relative;
                /*display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            display: box;
            -ms-justify-content: center;
            -o-justify-content: center;
            -webkit-box-pack: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;*/
                background-image: radial-gradient(circle at center, transparent 0%, transparent 40%, #00BA9B 100%);
                img {
                    /*padding-top: 4.8px;*/
                    width: 26px;
                    height: 26px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -13px;
                    margin-top: -13px;
                    /*transform: translate(-60%,-50%);*/
                }
            }
        }
    }
</style>